<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增缺陷</title>

    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
</head>
<body>
<!--新增缺陷页面-->
<form id="popupForm" class="layui-form layui-form-pane" method="post">
    <div class="layui-inline">
        <label class="layui-form-label">缺陷类型id</label>
        <div class="layui-input-inline">
            <input type="tel"  name="configValueId" lay-verify="required|configValueId" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">缺陷类型</label>
        <div class="layui-input-inline">
            <input type="tel"  name="configValueName" lay-verify="required|configValueName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">启用状态</label>
        <div class="layui-input-block">
            <input type="radio" name="isStart" value="0"  title="停用">
            <input type="radio" name="isStart" value="1"  title="启用">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="flawAdd">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<script src="../lib/layui/layui.js" charset="utf-8"></script>
<script src="../js/jquery.min.js" charset="utf-8"></script>


<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form,
            layer = layui.layer;

        //监听submit提交按钮 button ，lay-filter 为 userAdd 的
        form.on('submit(flawAdd)', function(data){
            //此段代码可以获取提交的数据
            /* layer.alert(JSON.stringify(data.field), {
                 title: '最终的提交信息'
             })*/
            //ajax 提交
            console.log($('#popupForm').serialize())
            $.ajax({
                type: "POST",
                dataType: "text",
                url: "/flaw/save" ,//url
                data: $('#popupForm').serialize(),  //表单数据
                success: function (result) {
                    if (result = "seccess") {
                        layer.msg('添加成功，1秒后自动关闭该窗口');
                        //延迟1秒执行，目的是让用户看到提示
                        setTimeout( function(){
                            //1、先得到当前iframe层（弹出层）的索引  ///2、提交成功关闭弹出层窗口
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        }, 1 * 1000 );
                    };
                },
                error : function() {
                    layer.msg('后台异常！未添加成功');
                }
            });
            //阻止页面跳转
            return false;
        });

        //自定义表单验证
        //required 为必填项
        form.verify({
            configValueName:function(value){
                if (value.length > 15) {
                    return "长度是15个字以内！请重新输入";
                }
            },
            configValueId:function (value) {
                if(isNaN(value)){//进行数字校验，如果不是数字填出对话框进行提示
                    return "请填写数字";
                }
                console.log(value);
                var datas={configValueId: value};
                var message = '';
                $.ajax({
                    type:"POST",
                    url:'/flaw/seclectByconfigValueId',
                    async: false, //改为同步请求
                    contentType:'application/json;charset=UTF-8',
                    data:JSON.stringify(datas),
                    dataType:'json',
                    success:function(data){
                        if(data){

                        }else{
                            message ="此缺陷类型ID已存在，请重新输入！"
                        }
                    }
                });
                //需要注意  需要将返回信息写在ajax方法外
                if (message !== '')
                    return message;
            }
        });
    });
</script>



</body>
</html>